<template>
    <div>
		<el-form :model="queryForm" :inline="true">
            <el-form-item>
                <el-input v-model="queryForm.title" clearable placeholder="标题"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init()">查询</el-button>
            </el-form-item>
		</el-form>
	</div>

    <div style="margin-top: 1%;">
        <el-table :data="tableData" style="width: 100%;" max-height="500" stripe :border="true" highlight-current-row size="large">
            <el-table-column prop="title" label="账号"/>
            <el-table-column prop="content" label="内容"/>
            <el-table-column prop="createTime" label="发布时间" :formatter="formatterTime"/>
            <el-table-column prop="updateTime" label="修改时间" :formatter="formatterTime"/>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button size="small" @click="handleDetail(scope.row)">详情</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button size="small" @click="handleComment(scope.row)">查看评论</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
            :page-sizes="[10, 20, 50]"
            @size-change="init"
            @current-change="init"
            v-model:page-size="queryForm.pageSize"
            v-model:current-page="queryForm.page"
            :total="totalData"
        />
    </div>

    <!-- 帖子详情 -->
    <el-dialog v-model="detailDialog" title="帖子详情" destroy-on-close>
        <el-form :model="detailForm">
            <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
                <el-input v-model="detailForm.title" disabled/>
            </el-form-item>
            <el-form-item prop="coverImage" label="封面图" :label-width="formLabelWidth">
                <el-image style="height: 200px;" :src="imageBaseURL + detailForm.coverImage" fit="fill" :preview-src-list="[imageBaseURL + detailForm.coverImage]"/>
            </el-form-item>
            <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
                <div v-html="detailForm.content" style="max-height: 500px; overflow-y: auto;"></div>
            </el-form-item>
            <el-form-item label="发布时间" prop="createTime" :label-width="formLabelWidth">
                <el-input v-model="detailForm.createTime" disabled/>
            </el-form-item>
            <el-form-item label="修改时间" prop="updateTime" :label-width="formLabelWidth">
                <el-input v-model="detailForm.updateTime" disabled/>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 评论 -->
    <el-dialog v-model="commentDialog" title="帖子评论" destroy-on-close>
        <el-table :data="commentData" style="width: 100%;" max-height="500" stripe :border="true" highlight-current-row size="large">
            <el-table-column prop="userName" label="姓名"/>
            <el-table-column prop="content" label="评论内容"/>
            <el-table-column prop="createTime" label="评论时间" :formatter="formatterTime"/>
        </el-table>
    </el-dialog>

</template>

<script setup>
import { imageBaseURL, formatterTime } from '../global';
import { getCurrentInstance, reactive, ref, onBeforeMount } from 'vue';
const { proxy } = getCurrentInstance(); // 这段代码是在 JavaScript 中获取当前实例，然后从当前实例中解构出名为 “proxy” 的属性。

const queryForm = reactive({
    page: 1,
    pageSize: 10,
})
const totalData = ref(0)

// 详情
const detailDialog = ref(false)
const detailForm = reactive({})

const formLabelWidth = ref(80)

let tableData = ref([])
const init = async() => {
    let params = Object.assign({}, queryForm)
    let result = await proxy.axios.post('forum/list', params)
    if(!result) {
        return
    }
    tableData.value = result.list
    totalData.value = result.total
}
// init() // 刷新一下列表

onBeforeMount(async() => {
    await init()
});

const handleDetail = (rowData) => {
    Object.assign(detailForm, rowData) // 使用 JavaScript 中的 Object.assign () 方法将 “rowData” 对象的属性复制到 “detailForm” 对象上，从而实现对 “detailForm” 对象的属性赋值。
    detailDialog.value = true
}

const handleDelete = async(rowData) => {
    let result = await proxy.axios.patch('forum/delete?id=' + rowData.id)
    if(!result) {
        return
    }
    proxy.msg.success('删除成功')
    init()
}

// // 处理分页变更
// const handlePageChange = async(page) => {
//     queryForm.page = page
//     console.log("Page changed:", queryForm.page, queryForm.pageSize); // 调试打印，查看分页变更时的值
//     // init()  // 更新数据
//     // let params = Object.assign({}, queryForm)
//     let result = await proxy.axios.post('forum/list', queryForm)
//     console.log(result)
//     if(!result) {
//         return
//     }
//     tableData.value = result.list
//     totalData.value = result.total
// }

let commentData = ref([])
let commentDialog = ref(false) // 是否展示
const handleComment = async(rowData) => {
    let forumId = rowData.id
    let result = await proxy.axios.get('forumComment/list?forumId=' + forumId)
    commentData.value = result
    commentDialog.value = true
}

</script>

<style lang="scss" scoped>

</style>